<template>

	<div>

		<el-form :inline="true" :model="query" class="demo-form-inline">
			<el-form-item label="姓名">
				<el-input v-model="query.UserName" placeholder="姓名"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="tianjia=true" style="background-color: red;border: none;">添加</el-button>
			</el-form-item>
			
			
		</el-form>

		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
			@selection-change="handleSelectionChange" :row-class-name="tableRowClassName">

			<!-- <el-table-column type="selection" width="80">
			</el-table-column> -->

			<el-table-column prop="Id" label="编号" width="80">
			</el-table-column>

			<el-table-column prop="UserName" label="姓名" width="120">
			</el-table-column>

			<el-table-column prop="Sex" label="性别" width="80">
			</el-table-column>

			<el-table-column prop="Tel" label="电话" width="120">
			</el-table-column>

			<el-table-column prop="CreateTime" label="创建时间" width="200">
			</el-table-column>

			<el-table-column prop="IsDelete" label="是否删除" width="120">
				<template slot-scope="scope">
				{{scope.row.IsDelete==0? '未删除':'已删除'}}
				</template>
			</el-table-column>

			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
					<el-button type="text" size="small" @click="update(scope.row.Id)">编辑</el-button>
					
					<el-button type="text" size="small" @click="Impower(scope.row.Id)">授权</el-button>
					<template>
						<el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
							icon-color="red" title="这是一段内容确定删除吗？" @confirm="Delete(scope.row.Id)">
							<el-button slot="reference" type="text" size="small" @click="" style="margin-left: 10px;">删除</el-button>
						</el-popconfirm>
					</template>
					
					
				</template>
			</el-table-column>


		</el-table>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="query.PageIndex" :page-sizes="[5,10, 20, 30, 40]" :page-size="query.PageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="query.total">
		</el-pagination>

		<!-- 	<div style="margin-top: 20px">
			<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
			<el-button @click="toggleSelection()">取消选择</el-button>
		</div> -->

		<el-dialog title="修改" :visible.sync="updateVisible" :destroy-on-close="false">
			<UserUpdate :Id="Id" v-if="updateVisible" @close="()=>{updateVisible=false;getdata()}"></UserUpdate>
		</el-dialog>

		<el-dialog title="添加" :visible.sync="tianjia">
			<UserAdd @close="()=>{tianjia=false;getdata()}" v-if="tianjia"></UserAdd>
		</el-dialog>
		
		<el-dialog title="授权" :visible.sync="Impowersq" :destroy-on-close="false">
			<UserRole :Id="Id"   @close="()=>{Impowersq=false;getdata()}" v-if="Impowersq"></UserRole>
		</el-dialog>
	</div>

</template>

<script>
	import UserAdd from "./UserAdd.vue"
	import UserUpdate from "./UserUpdate.vue"
	import UserApi from "@/api/UserApi.js"
	import UserRole from"./UserRole.vue"
	export default {
		data() {
			return {
				Id: 0,
				query: {
					UserName: "",
					PageSize: 5,
					PageIndex: 1,
					total: 0
				},
				updateVisible: false,
				tianjia: false,
				tableData: [],
				multipleSelection: [],
				Impowersq:false,
			}
		},
		components: {
			UserUpdate,
			UserAdd,
			UserRole
		},
		methods: {
			getdata() {
				UserApi.query(this.query).then(res => {
					if (res.code == 1) {
						this.tableData = res.data.data
						this.query.total = res.data.total;
					}
				})
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},
			update(id) {
				this.updateVisible = true;
				this.Id = id;
			},
			
			Impower(id) {
				this.Impowersq = true;
				this.Id = id;
			},
			Delete(id) {
				UserApi.del(id).then(res => {
					if (res.code == 1) {
						console.log(res);
						this.$message({
							message: "删除成功",
							type: "success"							
						})
						this.getdata()
						// this.$emit('close')						
					}
				})
			},
			handleClick(row) {
				console.log("row=", row);
				this.$message("Id=" + row.Id + "")
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
					console.log("rows=", this.multipleSelection);
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.query.PageSize = val;
				this.getdata();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.query.PageIndex = val;
				this.getdata();
			},
			onSubmit() {
				this.query.PageIndex = 1;
				this.getdata();
			}
		},
		created() {
			this.getdata()
		}
	}
</script>

<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>